<template>
    <div class="AlarmManagement">
        <el-main>
            <!--form表单区-->
            <div class="form-box">
                <el-form :inline="true"
                         :model="formInline"
                         class="demo-form-inline"
                         label-position="left">
                    <el-form-item label="设备编号：" style=" margin-left: 0">
                        <el-input v-model="formInline.deviceNo" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称：">
                        <el-input v-model="formInline.deviceName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="处理状态：">
                        <el-select v-model="formInline.handleStautus" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未处理" value="未处理"></el-option>
                            <el-option label="已处理" value="已处理"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="告警时间：">
                        <template>
                            <el-date-picker
                                v-model="formInline.startTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                            -
                            <el-date-picker
                                v-model="formInline.endTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </template>
                    </el-form-item>
                </el-form>
                <el-form  :inline="true"
                          :model="formInline"
                          class="demo-form-inline"
                          label-position="left"
                >
                    <el-form-item label="告警详情："  style=" margin-left: 0">
                        <el-input v-model="formInline.alarmDetails" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="告警等级：">
                        <el-select v-model="formInline.alarmLevel" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="严重" value="严重"></el-option>
                            <el-option label="重要" value="重要"></el-option>
                            <el-option label="次要" value="次要"></el-option>
                            <el-option label="提示" value="提示"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-button @click="searchForm"> <i class="el-icon-search"></i> 查询</el-button>
                        <el-button @click="resetForm"> <i class="el-icon-refresh-right"></i> 重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button-box" style="text-align: left">
                <el-button> <i class="el-icon-download"></i> 批量导出</el-button>
                <el-button style="margin-left: 50px" @click="allHandle"  v-has="'add'"> <i class="el-icon-copy-document"></i> 批量处理</el-button>
            </div>
            <!--table区-->
            <div class="tab-box">
                <template>
                    <el-table
                        ref="thisTable"
                        :data="list"
                        style="width: 100%">
                        <el-table-column
                            type="selection">
                        </el-table-column>
                        <el-table-column
                            label="序号"
                            prop="id"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="设备编号"
                            prop="deviceNo"
                            width="160">
                        </el-table-column>
                        <el-table-column
                            label="设备名称"
                            prop="deviceName"
                            width="160">
                        </el-table-column>
                        <el-table-column
                            label="告警等级"
                            prop="alarmLevel"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            label="告警详情"
                            prop="alarmDetails"
                            width="160">
                        </el-table-column>
                        <el-table-column
                            label="所属部门"
                            prop="department"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            label="安装位置"
                            prop="installAddr"
                            width="160">
                        </el-table-column>
                        <el-table-column
                            label="告警时间"
                            prop="alarmTime"
                            width="160">
                            <template slot-scope="scope"> {{ new Date(scope.row.alarmTime).toLocaleString() }}</template>
                        </el-table-column>
                        <el-table-column
                            label="是否复位"
                            prop="reset"
                            width="80">
                            <template slot-scope="scope">{{ scope.row.reset==0?'是':'否'}}</template>
                        </el-table-column>
                        <el-table-column
                            prop="handleStatus"
                            label="处理状态"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button type="text"  style="color: #0a92fa">
                                    <router-link :to="{path:'/alarm/AlarmDetails',query:{id:scope.row.id}}" style="color: #0a92fa">详情</router-link>
                                </el-button>
                                <el-button type="text" @click="toHandle(scope.row)"  v-has="'add'">处理</el-button>
                                <el-button type="text" @click="resultHandle(scope.row)">处理结果</el-button>
                                <el-button type="text" @click="reportRisk(scope.row)"  v-has="'add'">隐患上报</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                    style="text-align: center"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=current
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
                </el-pagination>
            </div>
        </el-main>
        <!-- 处理的模态框 -->
        <el-dialog
            class="deal-alarm-dialog"
            title="告警处理"
            :visible.sync="dialogVisible"
            width="700px">
            <div>
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    label-position="top"
                    class="demo-ruleForm">
                    <el-form-item label="告警类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 350px" >
                            <el-option label="请选择" value="请选择" style="margin-left: 20px"></el-option>
                            <el-option label="真实告警" value="真实告警" style="margin-left: 20px"></el-option>
                            <el-option label="误报" value="误报" style="margin-left: 20px"></el-option>
                            <el-option label="测试" value="测试" style="margin-left: 20px"></el-option>
                            <el-option label="设备检查" value="设备检查" style="margin-left: 20px"></el-option>
                            <el-option label="消防演习" value="消防演习" style="margin-left: 20px"></el-option>
                            <el-option label="其他" value="其他" style="margin-left: 20px"   ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处理方式" prop="methods">
                        <el-radio-group v-model="ruleForm.methods">
                            <el-radio-button label="直接处理">直接处理</el-radio-button>
                            <el-radio-button label="发消息">发消息</el-radio-button>
                            <el-radio-button label="转工单">转工单</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="处理描述" prop="describe">
                        <el-input type="textarea"  rows="7"  v-model="ruleForm.describe"
                                  placeholder="请输入详情"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="上传现场照片" prop="img">
                        <el-upload
                            class="upload-demo"
                            v-model="ruleForm.img"
                            list-type="picture-card"
                            action=""
                            :before-upload="handleUpload"
                        >
                            +
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="isHandle">确 定</el-button>
                  </span>
        </el-dialog>


        <!-- 展示处理结果的模态框 -->
        <el-dialog title="处理结果" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column prop="id" label="序号"></el-table-column>
                <el-table-column prop="people" label="处理人" ></el-table-column>
                <el-table-column prop="warningType" label="告警类型"></el-table-column>
                <el-table-column prop="handleMethod" label="处理方式"></el-table-column>
                <el-table-column prop="handleDescription" label="处理描述"></el-table-column>
                <el-table-column prop="img" label="现场图片">
                    <template slot-scope="scope">
                        <img :src='scope.row.img' alt="" style="height: 70px">
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="处理时间"></el-table-column>
            </el-table>
        </el-dialog>


        <!-- 隐患上报的模态框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="report-box">
            <el-form
                :model="reportForm"
                :rules="rules"
                label-position="top"
                style="text-align: left">
                <el-form-item label="隐患标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="reportForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form
                    :inline="true"
                    :model="reportForm"
                    class="demo-form-inline"
                    :rules="rules"
                    label-position="top">
                    <el-form-item label="隐患等级" prop="danger">
                        <el-select v-model="reportForm.danger" placeholder="请选择">
                            <el-option label="一般" value="一般" style="margin-left: 20px"></el-option>
                            <el-option label="较大" value="较大" style="margin-left: 20px"></el-option>
                            <el-option label="重大" value="重大" style="margin-left: 20px"></el-option>
                            <el-option label="特大" value="特大" style="margin-left: 20px"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="隐患类别" prop="type">
                        <el-select v-model="reportForm.type" placeholder="请选择">
                            <el-option label="请选择" value="请选择" style="margin-left: 20px"></el-option>
                            <el-option label="真实告警" value="真实告警" style="margin-left: 20px"></el-option>
                            <el-option label="误报" value="误报" style="margin-left: 20px"></el-option>
                            <el-option label="测试" value="测试" style="margin-left: 20px"></el-option>
                            <el-option label="设备检查" value="设备检查" style="margin-left: 20px"></el-option>
                            <el-option label="消防演习" value="消防演习" style="margin-left: 20px"></el-option>
                            <el-option label="其他" value="其他" style="margin-left: 20px"   ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form-item label="位置详情" :label-width="formLabelWidth" prop="position">
                    <el-input v-model="reportForm.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="隐患描述" :label-width="formLabelWidth" prop="describe">
                    <el-input type="textarea" v-model="reportForm.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传隐患照片" prop="img">
                    <el-upload
                        class="upload-demo"
                        v-model="reportForm.img"
                        list-type="picture-card"
                        action=""
                        :before-upload="handleUpload"
                    >
                        +
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="isReportRisk">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios  from "axios";
export default {
    data:function (){
        return {
            gridDataImg:'',
            file:'',
            selected:[],
            reportRiskDeviceNo:'',
            reportRiskStatus:'',
            isHave:false,
            theHandleId:'',
            judgeAllHandle: false,
            total: 0, //总条数
            current: 1, //当前显示页码
            limit:5,
            list:null,
            gridData: [{
                id: '',
                people: '',
                warningType: '',
                handleMethod: '',
                handleDescription: '',
                img: '',
                time: ''
            }],
            dialogTableVisible: false,
            dialogFormVisible:false,
            reportForm:{
                title:'',
                danger: '',
                type: '',
                position: '',
                describe: '',
                img: ''
            },
            form: {
                num: '',
                people: '',
                type: '',
                method: '',
                describe: '',
                img: '',
                time: ''
            },
            formLabelWidth: '120px',
            tabPosition: 'top',
            ruleForm: {
                type: '',
                describe: '',
                img: '',
            },
            rules: {
                type: [
                    { required: true, message: '请选择告警类型', trigger: 'change' }
                ],
                methods: [
                    { required: true, message: '请选择处理方式', trigger: 'change' }
                ],
                describe: [
                    { required: true, message: '请输入描述内容', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
                ],
                title: [
                    { required: true, message: '请输入描述内容', trigger: 'blur' }
                ],
                danger: [
                    { required: true, message: '请选择告警类型', trigger: 'change' }
                ],
                position: [
                    { required: true, message: '请选择文件', trigger: 'change' }
                ],
            },
            dialogVisible:false,
            formInline: {
                deviceNo: '',
                deviceName: '',
                alarmStatus:'',
                alarmTime:'',
                alarmDetails:'',
                alarmLevel:'',
                handleStautus:'',
                startTime:'',
                endTime:''
            },
            tableData: [{
                id:'',
                deviceNo:'',
                deviceName: '',
                alarmLevel:'',
                alarmDetails:'',
                department:'',
                installAddr:'',
                alarmTime:'',
                reset:'',
                handleStatus:'',
            }]
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        // 上传文件
        handleUpload(file) {
            const formData = new FormData();// new一个FormData来用
            formData.append('file', file);//往里面加我的文件，属性名，属性值。这里append，但是log是看不到的，只能通过get一个什么东西才可以
            this.$axios({
                url:'/upload',
                method: 'POST',
                header: {
                    'content-type': 'multipart/form-data'// 设置请求头，注意常见的contenttype form-data就是常见的多媒体上传（图片、视频）
                },
                data: formData,
            }).then((res)=>{
                console.log(res.data.filePath)
                this.file=res.data.filePath
            })
            return false;
        },
        // 重置
        resetForm(){
            this.formInline={
                deviceNo: '',
                deviceName: '',
                alarmStatus:'',
                alarmTime:'',
                alarmDetails:'',
                alarmLevel:''
            }
            this.searchForm()
        },
        // 查询
        searchForm(){
            this.$axios({
                url:'/queryWarningsByCondition/1/20',
                method:'post',
                data:{
                    "department": '产线厂房',
                    "endTime": Date.parse(this.formInline.endTime),
                    "handleStatus": this.formInline.handleStautus,
                    "startTime": Date.parse(this.formInline.startTime),
                    "alarmDetails": this.formInline.alarmDetails,
                    "alarmLevel": this.formInline.alarmLevel,
                    "deviceName": this.formInline.deviceName,
                    "deviceNo": this.formInline.deviceNo,
                    "handleStautus": this.formInline.handleStautus,
                }
            }).then((res)=>{
                if(res.data.code==200){
                    console.log( res.data.data)
                    this.total = res.data.data.length;
                    this.tableData = res.data.data;
                    this.list = this.tableData.slice(
                        (this.current - 1) * this.limit,
                        this.current * this.limit
                    );
                }
            })
        },
        // 隐患上报按钮
        reportRisk(row){
            this.dialogFormVisible = true;
            this.reportRiskDeviceNo=row.deviceNo;
            this.reportRiskStatus=row.handleStatus
        },
        // 确认上报隐患
        isReportRisk(){
            if (this.reportForm.title===''||this.reportForm.position===''||this.reportForm.danger===''||this.reportForm.describe===''||this.reportForm.type===''){
                this.$message.error('必填项必填')
                return
            }
            this.$axios({
                url:'/riskquerys',
                method:'post',
                data:{
                    "deviceNo":this.reportRiskDeviceNo,
                    "location": this.reportForm.position,
                    "risksLevel": this.reportForm.danger,
                    "risksName": this.reportForm.title,
                    "risksType": this.reportForm.type,
                    "riskstatus": '待整改',
                }
            }).then((res)=>{
                console.log(res)
                if(res.data.code==200){
                    this.$message.success("隐患上报成功");
                }else {
                    this.$message.error('隐患上报失败')
                }
            })
            this.dialogFormVisible = false;
        },
        // 批量处理
        allHandle(){
            this.dialogVisible = true;
            this.judgeAllHandle = true;// 用来区分是按的是处理还是批量处理的，也为了在下面处理模态框里确认按钮时区分是处理还是批量处理
        },
        // 确认批量处理
        isAllHandle(){
            let arr = this.$refs.thisTable.selection;
            for(let i=0; i<arr.length; i++){
                this.selected.push(arr[i].id)
            }
            let newArr = [...this.selected]
            if (this.ruleForm.type===''||this.ruleForm.methods===''||this.ruleForm.describe===''){
                this.$message.error('必填项必填')
                return
            }
            axios({
                url: "/warningHandles",
                method: "post",
                data: {
                    handleDescription:this.ruleForm.describe,
                    handleMethod:this.ruleForm.methods,
                    ids:newArr,
                    warningType:this.ruleForm.type,
                    image:this.file
                },
            }).then((res) => {
                console.log(res)
                this.ruleForm={}
                this.init()
            });
        },
        //确认处理-根据id增加或者修改处理信息
        isHandle(){
            if (this.ruleForm.type===''||this.ruleForm.methods===''||this.ruleForm.describe===''){
                this.$message.error('必填项必填')
                return
            }
            this.dialogVisible = false;
            if (this.judgeAllHandle) {
                this.isAllHandle();
                return;
            }
            if(this.isHave){
                // 修改处理
                this.$axios({
                    url:'/warnings',
                    method:'put',
                    data:{
                        "handleDescription": this.ruleForm.describe,
                        "handleMethod": this.ruleForm.methods,
                        "id": this.theHandleId,
                        "image": this.file,
                        "warningType": this.ruleForm.type
                    }
                }).then((res)=>{
                    console.log('1',res)
                    this.init()
                    this.ruleForm={}
                })
            }else {
                // 添加处理
                this.$axios({
                    url:'/warninghandle',
                    method:'post',
                    data:{
                        "handleDescription": this.ruleForm.describe,
                        "handleMethod": this.ruleForm.methods,
                        "id": this.theHandleId,
                        "image": this.file,
                        "warningType": this.ruleForm.type
                    }
                }).then((res)=>{
                    console.log('2',res)
                    this.init()
                    this.ruleForm={}
                })
            }
        },

        // 处理按钮
        toHandle(row){
            this.dialogVisible = true;
            this.theHandleId=row.id;
            this.judgeAllHandle = false;
            //查询是否有处理过
            this.$axios({
                url:`/warninghandle/${this.theHandleId}`,
                params:{}
            }).then((res)=>{
                if(res.data.code==200){
                    if(res.data.data.result){
                        this.isHave=true;
                        this.ruleForm.id= this.theHandleId;
                        this.ruleForm.type=res.data.data.result.warningType;
                        this.ruleForm.methods=res.data.data.result.handleMethod;
                        this.ruleForm.describe=res.data.data.result.handleDescription;
                    }else {
                        this.isHave=false
                        this.ruleForm={
                            type: '',
                            methods:'',
                            describe: '',
                            img: '',
                        }
                    }
                }
            })
        },
        //查询处理结果
        resultHandle(row){
            let aDate = new Date()
            this.dialogTableVisible = true;
            this.$axios({
                url:`/warninghandle/${row.id}`,
                params:{}
            }).then((res)=>{
                if(res.data.code==200){
                    if(res.data.data.result){
                        this.gridData[0].id=`${row.id}`;
                        this.gridData[0].people='admin';
                        this.gridData[0].warningType=res.data.data.result.warningType;
                        this.gridData[0].handleMethod=res.data.data.result.handleMethod;
                        this.gridData[0].handleDescription=res.data.data.result.handleDescription;
                        this.gridData[0].time=new Date(aDate).toLocaleString();
                        this.gridData[0].img=res.data.data.result.image;
                    }else {
                        let arr=[
                            {
                                id: '-',
                                people: '-',
                                warningType: '-',
                                handleMethod: '-',
                                handleDescription: '-',
                                img: '-',
                                time: '-'
                            }
                        ]
                        this.gridData=arr
                    }
                }
            })
        },
        handleSizeChange(limit) {
            if (this.tableData) {
                if (limit) {
                    this.limit = limit;
                }
                this.list = this.tableData.slice(
                    (this.current - 1) * this.limit,
                    this.current * this.limit
                );
            }
        },
        handleCurrentChange(current) {
            if (this.tableData) {
                if (current) {
                    this.current = current;
                }
                this.list = this.tableData.slice(
                    (this.current - 1) * this.limit,
                    this.current * this.limit
                );
            }
        },
        init:function (){
            this.$axios({
                url:'/warning',
                params:{
                    department:'产线厂房'
                },
            }).then((res)=>{
                console.log(res.data.data.length)
                if (res.data.code==200){
                    this.tableData=res.data.data
                    this.total = res.data.data.length;
                    this.list = this.tableData.slice(
                        (this.current - 1) * this.limit,
                        this.current * this.limit
                    );
                }else {
                    this.$message.error('数据加载失败！')
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
}
a {
    text-decoration: none;
}
i {
    color: #0A92FA;
    font-weight: bold;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 10px;
}
.AlarmManagement {
    text-align: left;
    height: 100%;
    .el-container {
        height: 100%;
        .el-header {
            height: 50px;
            .nav{
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                background-color: #3A4049;
                height: 50px;
                .nav-left {
                    width: 370px;
                    display: flex;
                    justify-content: space-evenly;
                }
                .nav-right {
                    width: 200px;
                    display: flex;
                    justify-content: space-evenly;
                }
            }
        }

        .el-aside {
            background-color: #FFF;
        }
    }
    .el-main {
        padding: 15px;
        background-color: #FFF;
        margin: 0 12px;
        .form-box {
            .el-form {
                text-align: left;
                margin-bottom: 30px;
                .el-form-item {
                    margin-left: 20px;
                    .el-button {
                        padding: 6px 10px;
                        i {
                            color: #0A92FA;
                            font-weight: bold;
                            font-size: 18px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
        .button-box {
            .el-button{
                padding: 10px 15px;
            }
        }
    }
    .block {
        z-index: 500;
        position: fixed;
        bottom: 80px;
        left: 40%;
    }
}
.demo-ruleForm {
    text-align: left;
}
.report-box {
    .el-form-item{
        margin-bottom: 15px;
    }
}
.el-table {
    margin: 20px 0;
}
</style>